<template>
    <div class="join-drgs-container">
        <global-search @submitSearch="submitSearch" class="global-tool-search">
            <template slot="other-form">
                <el-form-item label="病案号/姓名">
                    <el-input v-model="form.name" clearable class="name-input"></el-input>
                </el-form-item>
                <el-form-item label="主诊名称/编码">
                    <el-input v-model="form.diagnosisCode" clearable class="name-input"></el-input>
                </el-form-item>
                <el-form-item label="主手术名称/编码">
                    <el-input class="weight-input" clearable v-model="form.surgeryCode"></el-input>
                </el-form-item>
                <el-form-item label="未入组类型">
                    <el-select v-model="form.gType" clearable filterable class="select-input" placeholder="">
                        <el-option :key="0" label="全部" :value="null"></el-option>
                        <el-option :key="1" label="零入组" value="零入组"></el-option>
                        <el-option :key="2" label="歧义组" value="歧义组"></el-option>
                    </el-select>
                </el-form-item>
            </template>
        </global-search>
        <div class="tables-box">
            <el-table
                border
                :data="tableData"
                :max-height="tableHeight"
                tooltip-effect="light"
                :empty-text="emptyText"
                @sort-change="sortChange"
                style="width: 100%">
                <el-table-column
                    show-overflow-tooltip
                    fixed
                    prop="date"
                    align="center"
                    type="index"
                    label="序号"
                    width="40">
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    fixed
                    prop="medicalRecordSign"
                    align="center"
                    label="病案号"
                    min-width="90">
                    <template slot-scope="scope">
                        <el-button type="text" :disabled="!viewInfoMonth(scope.row.dischargeDate)"
                                   @click="toInfo(scope.$index)">{{scope.row.medicalRecordSign}}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    fixed
                    prop="patientName"
                    align="left"
                    label="患者姓名"
                    min-width="65">
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="hospitalTime"
                    align="center"
                    label="住院次数"
                    min-width="80">
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="departmentName"
                    align="center"
                    label="出院科别"
                    min-width="110">
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="dischargeDate"
                    align="center"
                    sortable="custom"
                    label="出院时间"
                    min-width="85">
                    <template slot-scope="scope">
                        {{scope.row.dischargeDate.substring(0, 10)}}
                    </template>
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="hospitalDays"
                    align="center"
                    label="住院日"
                    min-width="65">
                </el-table-column>
                <el-table-column
                    prop="diagnosisName"
                    align="left"
                    label="主要诊断名称及编码"
                    min-width="180">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="light" placement="top">
                            <div slot="content">
                                {{scope.row.diagnosisName.split('-').slice(0, scope.row.diagnosisName.split('-').length-1).join('-')}}
                            </div>
                            <span class="exceed-text">
                                {{scope.row.diagnosisName.split('-').slice(0, scope.row.diagnosisName.split('-').length-1).join('-')}}
                            </span>
                        </el-tooltip>
                        <div>{{scope.row.diagnosisName.split('-').pop()}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="surgeryCodeName"
                    align="left"
                    label="主要手术名称及编码"
                    min-width="180">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="light" placement="top">
                            <div slot="content">
                                {{scope.row.surgeryCodeName.split('-').slice(0, scope.row.surgeryCodeName.split('-').length-1).join('-')}}
                            </div>
                            <span class="exceed-text">
                                {{scope.row.surgeryCodeName.split('-').slice(0, scope.row.surgeryCodeName.split('-').length-1).join('-')}}
                            </span>
                        </el-tooltip>
                        <div>{{scope.row.surgeryCodeName.split('-').pop()}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="hospitalization"
                    align="center"
                    sortable="custom"
                    label="住院总费用"
                    min-width="130">
                    <template slot-scope="scope">
                        {{scope.row.hospitalization | getMoneyNum}}
                    </template>
                </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    prop="gType"
                    align="center"
                    sortable="custom"
                    label="类型"
                    min-width="100">
                </el-table-column>
                <el-table-column
                    align="left"
                    label="未入组提示"
                    min-width="100">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="light" placement="top">
                            <div slot="content">
                                <div v-for="item in scope.row.explanationCustom">{{item}}</div>
                            </div>
                            <span class="exceed-text">{{scope.row.explanation}}</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="tableData.length > 0" :total="total" :page.sync="currentPage" :limit.sync="pageSize"
                        @pagination="changePage"/>
        </div>
    </div>
</template>

<script>
    import {getSortString, viewInfoMonth, getMoneyNum} from '@/utils/filters'
    import {getNotIncludedList} from '@/api/join-analysis/not-included'

    export default {
        name: 'index',
        data () {
            return {
                form: {
                    // 病案号/姓名
                    name: '',
                    // 主诊名称/编码
                    diagnosisCode: '',
                    // 主手术名称/编码
                    surgeryCode: '',
                    // 未入组类型
                    gType: ''
                },
                // 当前页
                currentPage: 1,
                // 每页数量
                pageSize: 20,
                // 表格高度
                tableHeight: 0,
                // 全部表格数据
                tableData: [],
                // 数据总数
                total: 0,
                // 全局搜索内容，用于翻页等不传参时使用数据
                globalForm: {},
                // 排序字段
                sortMap: {},
                // 排序方式
                sortType: '',
                // 空数据时显示的文本内容
                emptyText: '暂无数据',
                // 使用储存的数据，不去请求
                useStore: false
            }
        },
        created () {
            // tags判断入口是否从选项卡进入
            this.useStore = this.$route.query.tags === 'tags'
            this.initPage()
            // 头部40 + 快捷标签30 + 面包屑30 + 搜索框42 + 分页64 + 底部padding10 + 表格上面和灰色背景的空白10px
            let height = document.documentElement.clientHeight - 100 - 42 - 64 - 10 - 10
            this.tableHeight = height > 108 ? height : 108
        },
        mounted () {
            let searchHeight = document.getElementsByClassName('global-tool-search')[0].offsetHeight
            if (searchHeight > 42) {
                let height = document.documentElement.clientHeight - 100 - searchHeight - 64 - 10 - 10
                this.tableHeight = height > 108 ? height : 108
            }
            // 白色背景高度
            document.getElementsByClassName('tables-box')[0].style.height = this.tableHeight + 64 + 10 + 'px'
            // 分页组件位置，不能使用bottom = 0，当位置发生变化时会出错
            document.getElementsByClassName('pagination-container')[0].style.top = this.tableHeight + 10 + 'px'
            window.onresize = () => {
                let height = document.documentElement.clientHeight - 100 - searchHeight - 64 - 10 - 10
                this.tableHeight = height > 108 ? height : 108
                document.getElementsByClassName('tables-box')[0].style.height = this.tableHeight + 64 + 10 + 'px'
                document.getElementsByClassName('pagination-container')[0].style.top = this.tableHeight + 10 + 'px'
            }
        },
        methods: {
            viewInfoMonth,
            /**
             * 初始化页面参数
             */
            initPage () {
                let query = JSON.parse(JSON.stringify(this.$store.state.search.searchForm[this.$route.name]))
                if (query) {
                    this.form.name = query.name
                    this.form.diagnosisCode = query.diagnosisCode
                    this.form.surgeryCode = query.surgeryCode
                    this.form.gType = query.gType
                    this.currentPage = query.pageIndex || 1
                    this.pageSize = query.pageSize || 20
                }
            },
            /**
             * 翻页
             */
            changePage () {
                this.submitSearch()
            },
            /**
             * 提交查询
             * @param form 筛选条件
             */
            submitSearch (form) {
                let data = form || this.globalForm
                this.globalForm = data
                let params = {
                    ...data,
                    ...this.form,
                    pageSize: this.pageSize,
                    pageIndex: this.currentPage,
                    orderBy: this.sortType
                }
                this.tableData = []
                this.getList(params)
                this.setGetStore(this.$route.name, params)
            },
            /**
             * 查询列表
             * @param params 请求参数
             */
            getList (params) {
                this.emptyText = '加载中...'
                if (this.getSession(this.$route.name, 'getNotIncludedList') && this.useStore) {
                    this.useStore = false
                    let res = this.getSession(this.$route.name, 'getNotIncludedList')
                    this.emptyText = '暂无数据'
                    if (res.code.toString() === '200') {
                        this.total = res.data.total
                        res.data.rows.forEach(item => {
                            let arr = item.explanation.split(';')
                            this.tableData.push({
                                ...item,
                                explanationCustom: [arr[0], arr[1], arr[2]]
                            })
                        })
                        this.sortMap = res.data.maps
                    }
                } else {
                    getNotIncludedList(params).then(res => {
                        this.useStore = false
                        this.setSession(this.$route.name, {getNotIncludedList: res})
                        this.emptyText = '暂无数据'
                        if (res.code.toString() === '200') {
                            this.total = res.data.total
                            res.data.rows.forEach(item => {
                                let arr = item.explanation.split(';')
                                this.tableData.push({
                                    ...item,
                                    explanationCustom: [arr[0], arr[1], arr[2]]
                                })
                            })
                            this.sortMap = res.data.maps
                        }
                    }).catch(() => {
                        this.emptyText = '暂无数据'
                    })
                }
            },
            /**
             * 排序修改
             * @param colData.prop 排序参数
             * @param colData.order 正序倒序 ascending 升序 descending 降序 null 不排序默认
             */
            sortChange (colData) {
                this.sortType = getSortString(colData, this.sortMap)
                this.tableData = []
                this.currentPage = 1
                this.submitSearch()
            },
            /**
             * 前往病案详情
             * @param index 索引
             */
            toInfo (index) {
                // 获取当前页面筛选条件
                let query = JSON.parse(JSON.stringify(this.$store.state.search.searchForm[this.$route.name]))
                // 获取数据索引（详情页每页是1条，即是详情页页码）
                let pageIndex = (this.currentPage - 1) * this.pageSize + index + 1
                this.$store.dispatch('search/coverSearchFormItem', {
                    pageName: 'NotIncludedInfo',
                    query: {...query, pageIndex}
                })
                this.$router.push({name: 'NotIncludedInfo'})
            }
        },
        filters: {
            getMoneyNum,
            getType (val) {
                switch (val) {
                case 0:
                    return '正常'
                case 1:
                    return '低倍率'
                case 2:
                    return '高倍率'
                }
            }
        },
        beforeDestroy () {
            window.onresize = null
        }
    }
</script>

<style scoped lang="scss">
    .join-drgs-container {
        .el-form-item--mini.el-form-item {
            margin-bottom: 10px;
        }
        .name-input {
            width: 80px;
        }
        .select-input {
            width: 100px;
        }
        .weight-input {
            width: 80px;
        }
        .tables-box {
            background: #fff;
            padding: 10px 10px 0;
            position: relative;
            .pagination-container {
                position: absolute;
                top: 0;
                right: 0;
            }
        }
        /deep/.el-table {
            /deep/.cell {
                line-height: normal;
            }
        }
    }
</style>
